<template>
  <el-dialog
    :title="$t('点评')"
    :visible.sync="centerDialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
    :before-close="handleClose"
    append-to-body
    class="my-dialog__wrapper evaluate-container"
    width="40%"
  >
    <div class="evaluate-content">
      <p class="title">{{ $t("复诊报告") }}</p>
      <myRate v-model="score"></myRate>
      <p class="title">{{ $t("评价内容") }}</p>
      <el-input
        type="textarea"
        rows="10"
        :placeholder="$t('请输入...')"
        v-model="content"
      ></el-input>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button  @click="centerDialogVisible = false">{{
        $t("取 消")
      }}</el-button>
      <el-button type="primary" v-loading="isLoading" @click="handleDone">{{
        $t("确 定")
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/mission.js";
import myRate from "../../../components/my-rate.vue";
export default {
  components: {
    myRate,
  },
  data() {
    return {
      centerDialogVisible: false,
      isLoading: false,
      id: null,
      content: "",
      score: 4.5,
    };
  },
  methods: {
    openDialog(id) {
      this.id = id;
      this.content = "";
      this.centerDialogVisible = true;
    },
    handleClose(done) {
      this.$confirm(this.$t("确认关闭？"))
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async handleDone() {
      if (!this.content) {
        return this.$message.warning(this.$t("请输入内容"));
      }
      this.isLoading = true;
      // 出方案的专家
      let res = await this.$http.put(api.evaluate, {
        schemeId: this.id,
        score: this.score,
        content: this.content,
      });
      this.isLoading = false;
      if (res && res.code == 0) {
        this.$message.success("提交成功");
        this.$emit('initPinjia')
        this.centerDialogVisible = false;
      } else {
        this.$message.error(res.msg || this.$t("网络错误"));
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.evaluate-content {
  padding: 1rem 2rem;
  .title {
    font-size: 0.89rem;
    color: #666666;
    margin-bottom: 2rem;
  }
  .el-textarea {
    font-size: 0.879rem;
  }
}
</style>
